<template>
  <div class="withdraw-wrapper">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <div class="withdraw">
      <div class="title">提现金额</div>
      <div class="money">{{cash}}</div>
      <div class="reality">实际到账金额：{{money}}</div>
      <div class="service-charge">手续费：{{procedures}}</div>
      <div class="remark">备注：余额满500元方可提现,扣除5%手续费。</div>
    </div>
    <div class="password">
      <input type="text"
             placeholder="请输入密码"
             v-model="password"
             @focus="handleFocus"
             ref="input">
    </div>
    <common-button :content="content"
                   @submit="handleSubmit"
                   v-if="screenHeightNoChange"></common-button>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
export default {
  name: 'walletWithdraw',
  components: {
    CommonBack,
    CommonButton
  },
  data () {
    return {
      title: '提现',
      content: '确认提现',
      money: 0,
      cash: 0,
      procedures: 0,
      loading: true,
      password: '',
      screenHeightNoChange: true,
      oldFullHeight: document.documentElement.clientHeight
    }
  },
  created () {
    this.getCash()
  },
  methods: {
    handleSubmit () {
      if (this.cash === 0) {
        this.$tip('提现金额为零')
        return false
      }
      if (this.password === '') {
        this.$tip('密码为空')
        return false
      }
      this.postWithDraw()
    },
    getCash () {
      this.$api.me.cash()
        .then(this.getCashSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getCashSucc (res) {
      res = res.data
      console.log(res)
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.cash = data.cash
        this.money = data.money
        this.procedures = data.procedures
        this.loading = false
      }
    },
    postWithDraw () {
      this.$api.me.withdraw({ password: this.password })
        .then(this.postWithdrawSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    postWithdrawSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg)
        this.cash = 0
        this.money = 0
        this.procedures = 0
      } else if (res.code === this.$api.CODE_ERR) {
        this.$tip(res.msg)
      }
    },
    handleFocus () {
      const input = this.$refs.input
      input.scrollIntoViewIfNeeded()
    }
  },
  mounted () {
    const self = this
    window.onresize = () => {
      if (self.oldFullHeight) {
        self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.withdraw-wrapper
  initPosition()
  background-color $common_bgc
  z-index 100

  .withdraw
    display flex
    justify-content center
    align-items center
    flex-direction column
    padding-top 143px
    box-sizing border-box

    .title
      font-size $shop_name
      line-height $shop_name
      font-weight 500
      color $detail_title
      margin-bottom 35px

    .money
      font-size 56px
      line-height 56px
      font-weight 500
      color $detail_title
      margin-bottom 46px

    .reality
      font-size $address
      line-height $address
      font-weight 400
      color $location
      margin-bottom 23px

    .service-charge, .remark
      font-size $address
      font-family $address
      font-weight 400
      color $location
      margin-bottom 24px

    .remark
      margin-bottom 50px

.password
  width 100%
  padding()

  input
    width 100%
    height 90px
    background-color $common_bgc
    font-size $address
    color $footer_bgc
    padding-left 10px
    padding-right 10px
    box-sizing border-box
    border-color transparent
    border 1px solid #e6e6e6
    border-radius 4px

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
